<!-- 休假统计【年假】 -->
<template>
  <ContainerLayout class="leave-statistics">
    <div class="form-container">
      <el-form ref="formRef" :inline="true" :model="queryForm" class="query-form" label-width="40px">
        <UserInput v-model="queryForm.user" />
        <DeptCascader v-model="queryForm.deptIds" v-if="false" />
        <LeaveCategorySelect v-model="queryForm.category" v-if="false" />
        <el-form-item label="年份">
          <el-date-picker v-model="queryForm.date" type="year" placeholder="请选择" style="width: 100px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleClickSubmit" :icon="Search">查询</el-button>
          <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="button-toolbar" v-if="false">
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button plain size="small" type="success" :icon="Select" v-if="false">批量通过</el-button>
          <el-button plain size="small" type="danger" :icon="CloseBold" v-if="false">批量不通过</el-button>
          <el-button plain size="small" type="primary" :icon="Download" v-if="false">导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-container">
      <div class="table-wrap" ref="tableWrap">
        <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange" scrollbar-always-on style="width: 100%" border :height="tableHeight" header-cell-class-name="table-header-row" empty-text="没有数据">
          <el-table-column type="selection" :selectable="selectable" width="55" fixed />
          <el-table-column prop="deptName" label="部门" width="120" fixed />
          <el-table-column prop="userNick" label="姓名" width="120" fixed />
          <el-table-column prop="userName" label="用户名" width="150" fixed />
          <el-table-column prop="entryTime" label="入职时间" width="120" fixed />
          <el-table-column>
            <template #header>当前周期假期（年假）</template>
            <el-table-column label="发放天数" width="90">
              <template #default="scope">
                <el-text truncated>{{ scope.row.holidayNum }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="已用天数" width="90">
              <template #default="scope">
                <el-text truncated>{{ scope.row.holidayUsedNum }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="剩余天数" width="90">
              <template #default="scope">
                <el-text truncated> {{ scope.row.holidayNum - scope.row.holidayUsedNum }}</el-text>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <template #header>上周期结余</template>
            <el-table-column label="结余天数" width="90">
              <template #default="scope">
                <el-text truncated>{{ scope.row.lastYearHolidayNum }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="已用天数" width="90">
              <template #default="scope">
                <el-text truncated>{{ scope.row.lastYearHolidayUsedNum }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="剩余天数" width="90">
              <template #default="scope">
                <el-text truncated>{{ scope.row.lastYearHolidaySurplusNum }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="结余有效期" width="100">
              <template #default>{{ tableColYear.getFullYear() }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="可用总天数" width="120" />
          <el-table-column />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button type="success" link :icon="Search" @click="handleClickBtnShowDetail(scope.row)">查看明细</el-button>
              <el-button type="primary" v-if="false" link :icon="Edit" @click="handleClickBtnEdit(scope.row)">编辑</el-button>
              <el-button type="danger" v-if="false" link :icon="Delete" @click="handleClickBtnDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </ContainerLayout>
  <DialogHolidayDetail ref="refDialogHolidayDetail" />
  <DialogHolidayEdit ref="refDialogHolidayEdit" />
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'
import ContainerLayout from '../layout/ContainerLayout.vue'
import DialogHolidayDetail from '../components/dialog/DialogHolidayDetail.vue'
import DialogHolidayEdit from '../components/dialog/DialogHolidayEdit.vue'
import UserInput from '../layout/FormTableLayout/UserInput.vue'
import DeptCascader from '../layout/FormTableLayout/DeptCascader.vue'
// import TimeSlotDatePicker from '../layout/FormTableLayout/TimeSlotDatePicker.vue'
import LeaveCategorySelect from '../layout/FormTableLayout/LeaveCategorySelect.vue'
import { Download, Select, CloseBold, Search, Refresh, Delete, Edit } from '@element-plus/icons-vue'
// import { useHolidayCategoryStore } from '../stores'
import api from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'

// const holidayCategoryList = useHolidayCategoryStore().getAllState()
const refDialogHolidayDetail = ref()
const refDialogHolidayEdit = ref()
const multipleSelection = ref<any[]>([])
const tableData = ref<any[]>([])
const tableHeight = ref(500)
const tableWrap = ref<HTMLElement | null>(null)
const loading = ref(false)
const selectable = (row: any) => row.status !== 1
const queryForm = reactive({
  user: '',
  date: new Date(),
  deptIds: [] as any[] | string[],
  category: '',
})
const tableColYear = ref(new Date())
// const colName = computed(() => {
//   if (queryForm.category !== '') {
//     return holidayCategoryList.find((item) => item.dictValue === queryForm.category)?.dictLabel
//   } else {
//     return ''
//   }
// })
const handleClickSubmit = async () => {
  // console.log('handleClickSubmit', queryForm)
  await getDataList()
}
const handleClickBtnReset = async () => {
  await resetForm()
}
const resetForm = async () => {
  queryForm.user = ''
  queryForm.date = new Date()
  queryForm.deptIds = []
  queryForm.category = ''
  await getDataList()
  // console.log('resetForm', queryForm)
}

const getDataList = async () => {
  loading.value = true
  // 设置请求参数
  const params = {
    pageSize: 99999,
    yearNum: queryForm.date.getFullYear(),
    holidayCategory: 0,
  }

  if (queryForm.user !== '') {
    Object.assign(params, { userName: queryForm.user })
  }
  const rows = await api.Holiday.getSearch(params)

  var params2 = Object.assign({}, params)
  params2.yearNum = queryForm.date.getFullYear() - 1

  const rows2 = await api.Holiday.getSearch(params2)
  tableColYear.value = queryForm.date

  rows.forEach((item: any) => {
    const item2 = rows2.find((item2: any) => item2.userId === item.userId)
    if (item2) {
      Object.assign(item, {
        lastYearHolidayNum: item2.holidayNum,
        lastYearHolidayUsedNum: item2.holidayUsedNum,
        lastYearHolidaySurplusNum: item2.holidayNum - item2.holidayUsedNum,
      })
    } else {
      Object.assign(item, {
        lastYearHolidayNum: 0,
        lastYearHolidayUsedNum: 0,
        lastYearHolidaySurplusNum: 0,
      })
    }
  })
  loading.value = false
  tableData.value = rows
  return []
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

const handleClickBtnDelete = async (row: any) => {
  ElMessageBox.confirm('确定要删除该条数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // To do 完成删除操作
      console.log('handleClickBtnDelete', row)
      // await http({
      //   method: 'DELETE',
      //   path: `/dev-api/oa/headcount/${form.colId}`,
      //   params: {},
      // })
      ElMessage({
        message: `删除成功！`,
        grouping: true,
        type: 'success',
      })
      await getDataList()
    })
    .catch(() => {})
}

const handleClickBtnShowDetail = async (row: any) => {
  console.log('handleClickBtnShowDetail', row)
  row.yearNum = queryForm.date.getFullYear()
  refDialogHolidayDetail.value?.openDialog(row)
}

const handleClickBtnEdit = async (row: any) => {
  console.log('handleClickBtnEdit', row)
  // refDialogHolidayEdit.value?.openDialog(row)
}

onMounted(async () => {
  // await getDataList()
  nextTick(() => {
    const tableWrapElement = tableWrap.value
    if (tableWrapElement) {
      // 设置表格高度
      tableHeight.value = tableWrapElement.offsetHeight
    }
  })
})
</script>
<style lang="scss" scoped>
.leave-statistics {
  display: flex;
  flex-direction: column;
  .form-container {
    display: flex;
    justify-content: flex-start;
  }
  .table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
    }
  }
  .button-toolbar {
    margin-bottom: 18px;
  }
  .table-header-cell {
    writing-mode: vertical-lr;
  }
  .remark-content {
    width: 100%;
    height: 100%;
    white-space: pre-line;
  }
}
</style>
